<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>spring boot webSocket + 广播式</title>
	</head>
	<body>
		<noscript>您的浏览器不支持</noscript>
		<div id="">
			<div id="">
				<button id="connect" onclick="connect()">连接</button>
				<button id="disconnect" disabled="disabled" onclick="disconnect()">
					断开连接
					
				</button>
			</div>
			<div id="conversationDiv">
			<label>输入你的名字<input type="text" id="name"/></label>
			<button id="sendName" onclick="sendName()"> 发送</button>
			<div id="response"></div>
			</div>
		</div>
		<script th:src="@{sockjs.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{stomp.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{jquery-3.2.1.min.js}"></script>
		<script type="text/javascript">
		
		$(function(){
			disconnect();
		});
		
			var stompClient = null;
			function setConnected(connected){
				document.getElementById('connect').disabled = connected;
				document.getElementById('disconnect').disabled = !connected;
				document.getElementById('conversationDiv').style.visibility=connected?
				'visible': 'hidden';
				$('#response').html();
			}
			
			function connect(){
				var socket = new SockJS('/endpointWisely');
				stompClient = Stomp.over(socket);
				//连接webSocket服务端
				stompClient.connect({},function(frame){
					setConnected(true);
					console.log('Connected='+frame);
					stompClient.subscribe('/topic/getResponse',function(response){//din
						showResponse(JSON.parse(response.body).responseMessage);
					});
				});
			}
			function disconnect(){
				if(stompClient!=null){
					stompClient.disconnect();
				}
				setConnected(false);
				console.log("Disconnected");
			}
			function sendName(){
				var name =$("#name").val();
				stompClient.send("/welcome",{},JSON.stringify({'name':name}));
			}
			function showResponse(message){
				var response = $("#response");
				response.html(message);
			}
		</script>
	</body>
</html>
